<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="19e">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes"> 
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		
		<link rel="stylesheet" href="http://testtest.19e.cn:18001/upload/h5/css/base.css?t=201508221735">
		<title>小e到家福利疯狂派发中</title>
		<style>
			input::-ms-input-placeholder{text-align: center;}
			input::-webkit-input-placeholder{text-align: center;}
			.main-blk { width: 100%; overflow: hidden; max-width: 480px; margin: 0 auto; font-size: 14px; background-color: #FC352D;}
			.btn-white, .btn-orign { display: block; width: 85%; text-align: center; height: 40px; line-height: 28px; padding: 6px 12px; background-image: none; border-radius: 6px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif,"\5FAE\8F6F\96C5\9ED1"; border: none;}
			.btn-white { background-color: #fff; color: #333;}
			.btn-orign {margin: 5% 7.5%; background-color: #FC5930; color:white;}
			.modal-tip .modal-content { background: none; box-shadow: none; border: none;}
			.modal-tip .modal-hd { padding: 0; border: none; }
			.modal-tip .modal-bd { padding: 0 15px; }
			.modal-tip .modal-ft { border: none; }


			.redbag-hd { width: 100%; position: relative;}
			.redbag-hd .redbag-banner, .redbag-state-layer, .redbag-rules-layer {display: block; width: 100%;}
			.redbag-state-layer, .redbag-rules-layer {background-size: 100% auto; overflow: hidden; }
			.redbag-state { width: 78.125%; position: relative; margin: 0 auto; padding-bottom: 30px; border-bottom: 2px dashed #f9c072; }	
			.redbag-state-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; }
			.redbag-decoration { position: absolute; width: 14.4%; right: 0; bottom: 15px; margin-right: -3%; z-index: 3;}
			.redbag-open { padding: 22% 8% 0; }		
			.redbag-open .btn-orign {box-shadow: 0 3px 1px #862e07;}
			

			.redbag-lab {width: 100%; display: block; position: relative; margin-bottom: 5%; background-color: #fff; border: 1px solid #e4e4e4; border-radius: 6px;}
			.redbag-input { margin: 5% 7.5%;  display: block; width: 85%; height: 40px; padding: 16px 12px; background-color: #fff; background-image: none; border: 0;	font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif,"\5FAE\8F6F\96C5\9ED1"; font-size: 14px; border-radius: 6px;}
			.redbag-input:focus {outline: 0;}
			.redbag-input-del { position: absolute; width: 16%; right: 0; top: 0; display: none; padding-top: 8px;}
			.redbag-input-del em { display: inline-block; width: 24px; height: 24px; line-height: 20px; color: #dedede; text-align: center; border: 2px solid #dedede; border-radius: 50%; font-size: 125%;}
			.redbag-input-regexp { margin-top: 10px; text-align: center; color: #fff; display: none; font-size: 12px;}
			
			.redbag-coupon { padding: 10% 5px 0; overflow: hidden;background-color:#f0301f;width: 95%;margin: 0 2.5%; }
			.redbag-putinto { line-height: 22px; padding: 1px 0 ; text-align: center; color: #eee;}
			.redbag-putinto span { font-size: 125%; font-family: Arial; margin: 0 3px; vertical-align: -1px; } 
			.redbag-coupon .btn-orign { margin-left: 12%; float: left; width:35%; color:white; font-size: 12px;}
			.redbag-coupon .btn-orign + .btn-orign {margin-left: 0;}

			.modal-coupon {width: 100%; background-color: #ffeec3; padding-bottom: 15px;}
			.modal-coupon p { line-height: 30px; color: #a51b00; text-align: center; padding-top: 15px; font-size: 16px; }
			.modal-coupon p span { color: #f02403; }
			.modal-coupon button.btn-orign { width: 80%; margin: 15px auto; }
			

			.redbag-coupon-ticket {width: 100%; overflow: hidden; position: relative;}
			.redbag-coupon-ticket img {display: block;}
			.redbag-coupon-value { color: #fee832; position: absolute; width: 46.05%; left: 50%; top: 46%; margin-left: -28px; margin-top: -14px; font-size: 28px; line-height: 1; }
			.redbag-coupon-value em {font-size: 38px; margin-right: 3px; font-family: Arial; vertical-align: -3px;}
			
			
			.redbag-rules-layer { padding-top: 30px; }
			.redbag-rules { width: 78.125%; margin: 0 auto; color: #666; background-color: #fff; border: 1px solid #f7ae45; padding-bottom: 30px; margin-bottom: 10px;}
			.redbag-rules .redbag-title { height: 40px; line-height: 40px; color: #fff; text-align: center; font-size: 16px; background-color: #f07f3b;}
			.redbag-rules ol { width: 72%; margin: 0 auto; padding-top: 15px;}
			.redbag-rules li { margin-bottom: 10px; list-style-type: decimal;}
			.redbag-rules p { margin-top: 20px; color: #f7ae45;}

			.redbag-loading { position: absolute; left: 50%; top: 40%; padding: 15px; margin-left: -30px; z-index: 99; display: block; border-radius: 6px; background-color: #000; opacity: .5;}
			.redbag-loading .redbag-icon { width: 30px; height: 30px; display: block; background:url(http://testtest.19e.cn:18001/upload/h5/images/active/lantern/redbag_loading.png) no-repeat; background-size: 100% 100%; }
			.loading {
				-webkit-animation-name: load;
				-webkit-animation-duration: 2s;
				-webkit-animation-timing-function: linear; 
				-webkit-animation-iteration-count: infinite; 
			}
			.input_border{
				width: 95%;
				height: 50%;
				margin: 0 2.5%;
				border: 0 solid #e4e4e4;
				background-color: #f0301f;
			}

			.text1{
				color: white;
				width: 36%;
				height: 20px;
				margin: 0 32%;
				padding-top: 10px;
			
			
			}

			.bottom_detail{
				width: 100%;
				height: 250px;
				background-color:#FC352D;
			}

			.textborder{
				width: 90%;
				height: 200px;
				margin: 2% 5%;
			}

			.textdetail{
				width: 95%;
				font-size: 14px;
				color: white;
				margin: 3% 2.5%;

			}


			
			@-webkit-keyframes load {
				0% {
					-webkit-transform: rotateZ(0);
					-moz-transform: rotateZ(0);
					-ms-transform: rotateZ(0);
					transform: rotateZ(0);				
				}
				
				25% {
					-webkit-transform: rotateZ(90deg);
					-moz-transform: rotateZ(90deg);
					-ms-transform: rotateZ(90deg);
					transform: rotateZ(90deg);				
				}
				
				50% {
					-webkit-transform: rotateZ(180deg);
					-moz-transform: rotateZ(180deg);
					-ms-transform: rotateZ(180deg);
					transform: rotateZ(180deg);				
				}
				
				75% {
					-webkit-transform: rotateZ(270deg);
					-moz-transform: rotateZ(270deg);
					-ms-transform: rotateZ(270deg);
					transform: rotateZ(270deg);				
				}
				
				100% {
					-webkit-transform: rotateZ(360deg);
					-moz-transform: rotateZ(360deg);
					-ms-transform: rotateZ(360deg);
					transform: rotateZ(360deg);				
				}												
				
			}
		
		</style>

	</head>
	<body>	
	
		<div class="main-blk">
			<div class="redbag-hd">
				
				<img src="http://testtest.19e.cn:18001/upload/others/2016-12-02/222.png" class="redbag-banner img-responsive" alt="小e到家超市红包大放送">



				<div id="redbag-open" class="input_border">
					<div class="text1">输入手机号领取红包</div>
					<input type="tel" id="loginname"  class="redbag-input" placeholder="请输入手机号码" maxlength="11">
					<button id="redbag-open-btn" class="btn-orign">马上领取</button>
					<p class="redbag-input-regexp">请输入正确手机号！</p>
				</div>

				<div id="redbag-coupon" class="redbag-coupon" style="display: none;">
					<p class="redbag-putinto" id="redbag-putinto"></p>
					<a href="http://mp.weixin.qq.com/s?__biz=MzAwMzY1MjkyNQ==&mid=401767458&idx=1&sn=7be03d7972beb63e9740a020a870fa91#rd" class="btn-orign">微信使用代金券</a>
					<a href="http://sdj.19e.cn/app/index.html" class="btn-orign">APP使用代金券</a>	
				</div>	

				<!-- <div class="redbag-state-layer">
					<div class="redbag-state">
						<img src="http://testtest.19e.cn:18001/upload/h5/images/active/third/third-pocket.jpg?t=201605101702" alt="红包口袋" class="img-responsive">
						<span class="redbag-decoration"><img src="http://testtest.19e.cn:18001/upload/h5/images/active/third/third-dec.png?t=201605101426" alt="装饰红包" class="img-responsive"></span>

						<div class="redbag-state-content">
							
							<div id="redbag-open" class="redbag-open">
								<label class="redbag-lab">
									<input type="tel" id="loginname"  class="redbag-input" placeholder="请输入手机号" maxlength="11">
									<span class="redbag-input-del" id="redbag-input-del"><em>&times;</em></span>
								</label>
								<button id="redbag-open-btn" class="btn-orign">领取红包</button>
								<p class="redbag-input-regexp">请输入正确手机号！</p>
							</div>
							
							<div id="redbag-coupon" class="redbag-coupon" style="display: none;">
								<p class="redbag-putinto" id="redbag-putinto"></p>
								<a href="http://mp.weixin.qq.com/s?__biz=MzAwMzY1MjkyNQ==&mid=401767458&idx=1&sn=7be03d7972beb63e9740a020a870fa91#rd" class="btn-orign">微信使用代金券</a>
								<a href="http://sdj.19e.cn/app/index.html" class="btn-orign">APP使用代金券</a>	
							</div>	
													
						</div>	

						
					</div>
				</div> -->
			
			</div>

			<div class="bottom_detail">

				<img src="http://114.247.40.81:81/images/active/qqq_05.png" style="width:80%;height:30px;margin:0 10%;">
				<div class="textborder">
				<div class="textdetail">1、代金券金额随机发放，领取成功后，进入“个人中心”后，即可使用。</div>
				<div class="textdetail">2、单笔订单可使用一张代金券，本券仅限流量充值使用。</div>
				<div class="textdetail">3、代金券有效期：自领取之日起7日有效。</div>
				<div class="textdetail">4、本活动仅限APP用户专享。</div>
				</div>

			</div>
			
			<!-- <div class="redbag-rules-layer">
				<div class="redbag-rules">
					<h3 class="redbag-title">活动规则</h3>
					<ol>
						<li>同一用户（同一账号、同一手机号、同一终端设备） 可领取一次优惠券</li>
						<li>优惠券有效期可登陆个人中心查看</li>
						<li>优惠券限购买超市商品，每单限用一张优惠券</li>
						<li>活动时间：即日起至2016年5月20日</li>				
					</ol>
					<p class="text-center">本活动最终解释权归小e到家所有</p>
				</div>		
					
			</div> -->



		</div>

		<div class="modal modal-tip fade" id="modal-tip">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-hd"><img src="http://testtest.19e.cn:18001/upload/h5/images/active/third/modal-hd-bg.png?t=201603171410" alt="恭喜您"></div>
					<div class="modal-bd">
						<div class="modal-coupon">
							<p>获得一张<span id="redbag-coupon-name"></span>红包</p>
							<div class="redbag-coupon-ticket" id="redbag-coupon-ticket">
								<img src="http://testtest.19e.cn:18001/upload/h5/images/active/third/third-coupon.png?t=201603171410" class="img-responsive" alt="小e到家优惠券">
								<span class="redbag-coupon-value"><em id="redbag-coupon-val"></em>元</span>
							</div>	
							<button class="btn-orign btn-block" data-dismiss="modal">确定</button>						
						</div>
					</div>					
				</div>
			</div>
		</div>	
		
		<div id="redbag-loading" class="redbag-loading" style="display:none;"><span class="redbag-icon"></span></div>


	</body>
</html>
<script src="http://testtest.19e.cn:18001/upload/h5/js/lib/jquery-2.1.3.min.js"></script>
<script src="http://testtest.19e.cn:18001/upload/h5/js/plugin/modal.js"></script>
<script>

	var $redbagOpen = $('#redbag-open'),
		$loginname = $('#loginname'),
		$redbagOpenBtn = $('#redbag-open-btn'),
		$redbagTip = $redbagOpen.find('.redbag-input-regexp'),

		$redbagCoupon = $('#redbag-coupon'),
		$redbagCouponName = $('#redbag-coupon-name'),
		$redbagCouponTicket = $('#redbag-coupon-ticket'),
		$redbagCouponVal = $('#redbag-coupon-val'),
		$redbagPutinto = $('#redbag-putinto'),
		$modalTip = $('#modal-tip'),
		$loading = $('#redbag-loading'),
		isweixin = /MicroMessenger/i.test( window.navigator.userAgent.toLowerCase() );

		// if( !isweixin ) {

		// 	$redbagCoupon.find('a').remove();
		// 	$redbagCoupon.css('padding-top','23.52%');
		// }	



	// {"tel":"13429897824","couponid":"CO160217182946920001","money":5.00,"resultcode":"0","resultdesc":"操作成功"}
	//  {"tel":"13429897824","money":5,"resultcode":"0","resultdesc":"已经领取过红包！"}
	$redbagOpenBtn.click(function() {

		var sLoginname = $loginname.val();

		if( !/^1(3|4|5|7|8)\d{9}$/.test( sLoginname ) ) {

			$redbagTip.show().html('请输入正确手机号！');

		}else {

			$redbagTip.hide();
			$(window).scrollTop(0);
			$loading.show().find('.redbag-icon').addClass('loading');

			$.ajax({
 			   	type: "POST",
 			   	url: "http://114.247.40.81:81/telgethb_getHongbao.jhtml",
 			   	data: { 
 			   		tel: sLoginname,
 			   		terminaltype: isweixin ? 'wx' : 'ios', 
 			   		version: '1.0.1'
 			   	},
 			   	jsonp:'jsonpcallback',
 			   	dataType: 'jsonp',
 			   	success: function( res ) { 
 			   		console.log( JSON.stringify(res) )
 			   		if( res.resultcode == '0' || res.resultcode == '-3') {

						$redbagOpen.hide();
						$redbagCoupon.show();
						$redbagCouponVal.html( res.money );
						$redbagCouponName.html( res.couponName );
						$redbagPutinto.html( res.resultcode == '0' ? ('代金券已放入账户<span>'+ sLoginname +'</span>') : ('<span>' + sLoginname + '</span>已经领过了哦~') ); 


						if( res.resultcode == '0' ) {

							setTimeout(function() {
								$modalTip.modal('show');	
							}, 500)							
						}


					}else if ( res.resultcode == '-2' ) {

						$redbagOpen.hide();
						$redbagCoupon.show();
						$redbagPutinto.html('结束啦，更多活动敬请关注小e到家！');

 			   		}else {

 			   			$redbagTip.show().html( res.resultdesc );
 			   		}

					
					$loading.hide().find('.redbag-icon').removeClass('loading');
 			   	},
 			   	error: function() {

 			   		$loading.hide().find('.redbag-icon').removeClass('loading');	
					alert('网络错误，请稍后重试');
 			   			
 			  	}
 			   
    		});	


			
			
		}

	})
</script>	